import { useEffect } from "react";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { GLTFLoader, GLTF } from "three/addons/loaders/GLTFLoader.js";
import * as THREE from "three";
import gsap from "gsap";

interface props {
  gui: GUI;
  GLTF?: GLTF;
}
const wheels = ["wheel_rr", "wheel_rl", "wheel_fr", "wheel_fl"];
export function AnimateModel({ gui, GLTF }: props) {
  /**
   * 注册动画
   */
  const registAnimate = () => {
    // 动画控制器
    //第一种写法
    // GLTF?.scene.traverse((child) => {
    //   console.log(child);
      
    //   if (wheels.includes(child.name)) {
    //     // 给每个轮子添加动画
    //     gsap.to(child.rotation, {
    //       duration: 1,
    //       x: Math.PI / 180 * 360,
    //       repeat: -1,
    //       yoyo: true,
    //     })
    //   }
    // });
    //第二种写法
    wheels.forEach((item) => {
        const child = GLTF?.scene.getObjectByName(item);
        console.log(child);
        
        if (child) {
          gsap.to(child.rotation, {
            duration: 1,
            x: Math.PI / 180 * 360,
            repeat: -1,
            yoyo: true,
          })
        }
    })

    // const mixer = new THREE.AnimationMixer(GLTF.scene);
    // const animationAction = mixer.clipAction(animations[0]);
    // animationAction.play();
    // gui.add(animationAction, "clampWhenFinished", true, false).name("循环播放");
    // gui.add(animationAction, "timeScale", 0, 3).name("播放速度");
  };
  useEffect(() => {
    if (GLTF && gui) {
      registAnimate();
    }
  }, [GLTF, gui]);
  return <></>;
}
